<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var offset = 0;

        function query(_line, _offset, callback) {
            var condition = {
                line: _line,
                offset: _offset,
                query: $("#queryStr").val()
            };
            var filterName = $("#filter").val();
            if (filterName.length > 0)
                condition.filterName = filterName;
            var startWith = $("#from").val();
            if (startWith != "")
                condition.startWith = startWith;
            var endWith = $("#to").val();
            if (endWith != "")
                condition.endWith = endWith;
            $.getJSON("/log", condition, function (result) {
                $("#result > tbody").empty();
                $("span#matched").text(result.length);
                $.each(result, function (i, record) {
                    $('#result > tbody:last-child').append('<tr><td>' + record.time + '</td><td>' + record.cloud + '</td><td>' + record.ipAddr + '</td><td>' + record.side + '</td><td>' + record.apiType + '</td><td>' + record.timed + '</td><td>' + record.method + '</td><td>' + record.user + '</td><td>' + record.msg + '</td><td>' + record["__tag__:__hostname__"] + '</td></tr>');
                });
                callback();
            });
        }

        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }

        function guid() {
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        }

        $(function () {
            var dateFormat = "yy-mm-dd",
                from = $("#from")
                    .datepicker({
                        defaultDate: "+1w",
                        dateFormat: dateFormat,
                        changeMonth: true,
                        numberOfMonths: 2
                    }).on("change", function () {
                        to.datepicker("option", "minDate", getDate(this));
                    }),
                to = $("#to").datepicker({
                    defaultDate: "+1w",
                    dateFormat: dateFormat,
                    changeMonth: true,
                    numberOfMonths: 2
                }).on("change", function () {
                    from.datepicker("option", "maxDate", getDate(this));
                });

            function getDate(element) {
                var date;
                try {
                    date = $.datepicker.parseDate(dateFormat, element.value);
                } catch (error) {
                    date = null;
                }
                return date;
            }

            $("#search").click(function () {
                query(10, 0, function () {
                    offset = $("#result > tbody tr").length;
                });
            });
            $("#prev").click(function () {
                var _offset = offset - $("#result > tbody tr").length;
                if (_offset < 1) _offset = 0;
                query(10, _offset, function () {
                    offset -= $("#result > tbody tr").length;
                });
            });
            $("#next").click(function () {
                query(10, offset, function () {
                    offset += $("#result > tbody tr").length;
                });
            });
            $("#saveAsFilter").click(function () {
                $.post('/filter', {
                    name: guid(), queries: $("#queryStr").val()
                }, function (resp) {
                    $("#queryStr").val("");
                    $("select#filter").append("<option value='" + resp.name + "'>" + resp.name + "</option>>");
                })
            });
        });
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row justify-content-md-center">
        <div class="w-100">
            <div class="alert alert-primary text-center" role="alert">
                Matched Logs:<span id="matched">0</span>
                <select id="filter">
                    <option value="">none</option>
                    <option value="preFilter1">timed>300</option>
                </select>
                <input type="text" id="queryStr" size="100"/>
                <span th:if="${subject.isPermitted('filter:create')}">
                    <button id="saveAsFilter">Save as Filter</button>
                </span>
                <label for="from">From</label>
                <input type="text" id="from" name="from">
                <label for="to">to</label>
                <input type="text" id="to" name="to">
                <button id="search">Search</button>
                <button id="prev">Prev</button>
                <button id="next">Next</button>
            </div>
            <div class="alert alert-secondary">
                <div class="my-20">
                    <div class="col-md-20">
                        <div>
                            <table id="result" class="table table-striped table-responsive-md">
                                <thead>
                                <tr>
                                    <th>Time</th>
                                    <th>Cloud</th>
                                    <th>ipAddr</th>
                                    <th>Side</th>
                                    <th>API-Type</th>
                                    <th>Timed</th>
                                    <th>Method</th>
                                    <th>User</th>
                                    <th>Message</th>
                                    <th>Host</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>2</td>
                                    <td>3</td>
                                    <td>4</td>
                                    <td>5</td>
                                    <td>6</td>
                                    <td>7</td>
                                    <td>8</td>
                                    <td>9</td>
                                    <td>0</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>